<template>
  <div class="bar-chart" id="barChart">
    
  </div>
</template>

<script>
export default {
  props: {
    isDarkTheme: Boolean,
  },
  mounted() {
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      const barChart = this.$echarts.init(document.getElementById('barChart'));
      window.addEventListener('resize', () => {
        barChart.resize();
      });
      const className = this.isDarkTheme ? 'custom-tooltip-dark' : 'custom-tooltip-light';
      
      const option = {
        title: {
          // text: '柱状图示例'
        },
        tooltip: {
          trigger: 'axis',
          className: "custom-tooltip",
          formatter: (params) => {
            // console.log(params);
            // return params[0].name + '<br>' +
            //   params[0].seriesName + ': ' + params[0].value + '个' + '<br>' +
            //   params[1].seriesName + ': ' + params[1].value + '%';
            return `
              <div class="${className}">
                <div class="title-box">
                  <div class="img-box"></div>
                  <span>${params[0].name}</span>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box1"></div>
                    <span> ${'处理单量' + '  '} </span> 
                  </div>
                  <div>
                    <span class="orderNum"> ${params[0].value + params[1].value} </span><span class="unit">单</span>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box2"></div>
                    <span> ${params[0].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="orderNum"> ${params[0].value} </span><span class="unit">单</span>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box3"></div>
                    <span> ${params[1].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="ratioNum"> ${params[1].value} </span><span class="unit">%</span>
                  </div>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box4"></div>
                    <span> ${params[2].seriesName + '  '} </span> 
                  </div>
                  <div>
                    <span class="ratioNum"> ${params[2].value} </span><span class="unit">%</span>
                  </div>
                </div>
              </div>
            `
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          top: '5%',
          bottom: '5%',
          containLabel: true
        },
        // legend: {
        //   top: '2%',
        //   data: ['处理单量及通过率', '总体通过率'],
        // },
        xAxis: {
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            show: true,
            color: '#24E9EA',
          },
          axisTick: {
            show: false,
          },
          data: ['履约计划', '渠道', '房屋', '电费', 'xxxxx', 'xxxxx', 'xxx'],
        },
        yAxis: [
          {
            type: 'value',
            name: '处理单量',
            position: "left",
            nameTextStyle: {
              color: "#fff",
            },
            nameLocation: 'middle', // 让标题垂直居中 
            nameGap: 35, // 根据需要调整与轴线的距离
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc' // 设置y轴线的颜色为红色
              }
            },
            axisLabel: {
              show: true,
              color: "#fff",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            },
          },
          {
            type: 'value',
            name: '通过率',
            position: "right",
            nameTextStyle: {
              color: "#fff",
            },
            nameLocation: 'middle', // 让标题垂直居中
            nameGap: 45, // 根据需要调整与轴线的距离
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc' // 设置y轴线的颜色为红色
              }
            },
            alignTicks: true, // 对齐两个Y轴的刻度
            axisLabel: {
              show: true,
              color: "#fff",
              formatter: '{value} %',
            },
            nameTextStyle: {
              // padding: 10
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            },
          }
        ],
        series: [
          {
            name: '提交单量',
            type: 'bar',
            stack: "Ad",
            yAxisIndex: 0,
            barWidth: '25%',
            animationDuration: 1000,
            animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  // { offset: 0, color: '#1494FB' }, // 渐变起始颜色
                  // { offset: 1, color: '#042B78' } // 渐变结束颜色
                  { offset: 0, color: '#1494FB' }, // 渐变起始颜色
                  { offset: 0.5, color: 'rgba(14, 109, 203, 0.63)' }, // 渐变结束颜色
                  { offset: 1, color: 'rgba(4, 43, 120, 0)' } // 渐变结束颜色
                ]
              )
            },
            data: [150, 230, 224, 218, 135, 147, 260]
          },
          // { // 柱状图截止图标
					// 	type: 'pictorialBar',
					// 	symbol: 'rect',
					// 	symbolSize: [15, 2],
					// 	symbolOffset: [0, -3],
					// 	symbolPosition: 'end',
          //   data: [150, 230, 224, 218, 135, 147, 260],
					// 	itemStyle: {
					// 		color: '#138EF2',
					// 	},
					// },
          {
            name: '转办单量',
            type: 'bar',
            stack: "Ad",
            yAxisIndex: 0,
            barWidth: '25%',
            animationDuration: 1000,
            animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#00CEEA' }, // 渐变起始颜色
                  { offset: 1, color: 'rgba(0, 116, 132, 0.1)' } // 渐变结束颜色
                ]
              )
            },
            data: [150, 230, 224, 218, 135, 147, 260]
          },
          {
            name: '总体通过率',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 1,
            showSymbol: true,
            shadowBlur: 10,
            shadowColor: 'rgba(241, 189, 115, 0.2)',
            animationDuration: 1000,
            animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
            emphasis: { // 鼠标移入光晕效果
              itemStyle: {
                color: '#fff', // 将颜色设置为透明，以便看到光晕效果
                symbol: 'circle',
                symbolSize: 10,
                borderColor: 'rgba(241, 189, 115, 0.3)', // 光晕的边框颜色
                borderWidth: 13, // 光晕的边框宽度
                shadowBlur: 30, // 光晕的模糊大小
                shadowColor: 'rgba(241, 189, 115, 0.36)' // 光晕的颜色
              }
            },
            itemStyle: {
              color: "#F1BD73",
              borderColor: "#F1BD73",
              borderWidth: 2,
            },
            data: [70, 78, 82, 82, 12, 32, 59],
          }
        ]
      }
      barChart.setOption(option);
      barChart.on('click', (params) => {
        this.$emit('handleOpenRobotDealNum', params.name)
      })
    }
  },
}

</script>

<style lang="scss" scoped>
.bar-chart {
  height: 100%;
  width: 100%;
}
::v-deep .custom-tooltip {
  width: 230px;
  height: 180px;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  background: url("../css/tootipBG-dark.png") no-repeat;
  background-size: 100% 100%;
  .custom-tooltip-dark {
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title-box {
      display: flex;
      align-items: center;
      .img-box {
        height: 30px;
        width: 40px;
        background: url("../css/title-dark.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .content-box {
      height: 30px;
      padding: 0 0 0 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .left-box {
        display: flex;
        align-items: center;
      }
      .icon-box1, .icon-box2, .icon-box3, .icon-box4 {
        height: 15px;
        width: 15px;
        margin: 0 10px 0 0;
      }
      .icon-box1 {
        background: url("../css/deal-dark.png") no-repeat;
        background-size: 100% 100%;
      }
      
      .icon-box2 {
        background: url("../css/approve-dark.png") no-repeat;
        background-size: 100% 100%;
      }
      .icon-box3 {
        background: url("../css/transfer-dark.png") no-repeat;
        background-size: 100% 100%;
      }
      .icon-box4 {
        background: url("../css/ratio-dark.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .orderNum {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .ratioNum {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
       background: linear-gradient(180deg, #FFF 51.85%, #F1BD73 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .unit {
      font-size: 14px;
    }
  }
}


  
</style>

